class SearchBar
{
    constructor(containerId)
    {
        var searchbarDiv = document.getElementById(containerId);
        searchbarDiv.innerHTML = '<div class="searchbar"><div class="input-group"><input type="text" class="form-control" id="autocomplete" placeholder="人名、地名、诗词名" /><div id="search-bar" class="pull-right"><img src="../assets/css/bootstrap/icons/search.svg" alt="" width="32" height="32"></div></div></div>';

        $('#autocomplete').autocomplete({
            lookup: function (query, done) {
                // Do Ajax call or lookup locally, when done,
                // call the callback and pass your results:
                if(query==null||$.trim(query)=="")
                {
                    done({suggestions: []});
                    return;
                }
                var result = {
                    suggestions: [{
                            "value": "黄鹤楼-崔颢",
                            "data": "崔颢"
                        },
                        {
                            "value": "黄鹤楼-杜甫",
                            "data": "李白"
                        },
                        {
                            "value": "岳阳楼-王勃",
                            "data": "王勃"
                        },
                        {
                            "value": "卜算子·游泳-毛泽东",
                            "data": "毛泽东"
                        }
                    ]
                };
                done(result);
            },
            onSelect: function (suggestion) {

            }
        });
    }
}